<template>
  <el-container>
    <meta charset="utf-8" />
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <el-header class="el_custom">
      <el-menu :default-active="0" mode="horizontal" @select="menuSelect">
        <li class="el-menu-item" style="font-size: 18px; margin-right: 10px">
          程序设计能力训练平台
        </li>
        <el-menu-item index="0"
          ><i class="el-icon-s-home"></i>首页</el-menu-item
        >
        <el-menu-item index="1"
          ><i class="el-icon-s-grid"></i>问题</el-menu-item
        >
        <el-menu-item index="2"
          ><i class="el-icon-trophy"></i>练习&比赛</el-menu-item
        >
        <el-menu-item index="3"
          ><i class="el-icon-s-management"></i>课程</el-menu-item
        >
        <el-menu-item index="4"
          ><i class="el-icon-postcard"></i>记忆卡片</el-menu-item
        >
        <el-menu-item index="5"><i class="el-icon-cpu"></i>状态</el-menu-item>
        <el-submenu index="6"
          ><template slot="title"
            ><i class="el-icon-s-data"></i>排名</template
          ></el-submenu
        >
        <el-submenu index="7"
          ><template slot="title"
            ><i class="el-icon-info"></i>关于</template
          ></el-submenu
        >
        <li class="el-menu-item" style="float: right">
          <el-dropdown v-if="isLogin">
            <el-button>
              {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click="logOut">登出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button v-show="!isLogin" @click="loginDialogShow">
            登录
          </el-button>
        </li>
      </el-menu>
    </el-header>
    <el-main class="el_custom">
      <!-- Main Page Rander-->
      <nuxt />
      <el-dialog
        title="登录"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input v-model="userName" placeholder="用户名"></el-input>
        <el-input
          placeholder="请输入密码"
          v-model="passWord"
          show-password
          style="margin-top: 10px"
        ></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="login">登 录</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      loginUserInfo: undefined,
      dialogVisible: false,
      userName: "",
      passWord: "",
      isLogin: false,
    };
  },
  methods: {
    login() {
      axios
        .post("/api/login", {
          username: this.userName,
          password: this.passWord,
        })
        .then((res) => {
          if (res.data.data != "NO DATA") {
            this.loginUserInfo == res.data.data;
            this.$message({
              message: "登录成功",
              type: "success",
            });
            this.isLogin = true;
            this.dialogVisible = false;
            this.$store.commit("info/setUserInfo", res.data.data);
            this.$store.commit("info/setLoginInfo", true);
          } else {
            this.$message.error("登录失败 错误的账号密码");
          }
        });
    },
    logOut() {
        console.log(test);
      this.$store.commit("info/setUserInfo", undefined);
      this.$store.commit("info/setLoginInfo", false);
      this.$message({
        message: "已经登出",
        type: "success",
      });
      this.isLogin = false
    },
    loginDialogShow() {
      this.dialogVisible = true;
    },
    menuSelect(key, keyPath) {
      switch (key) {
        case "0":
          this.$router.push({
            path: `/`,
          });
          break;
        case "1":
          this.$router.push({
            path: `/question`,
          });
          break;
        case "2":
          this.$router.push({
            path: `/test`,
          });
          break;
        case "3":
          this.$router.push({
            path: `/class`,
          });
          break;
        case "4":
          this.$router.push({
            path: `/flipcard`,
          });
          break;
      }
    },
  },
};
</script>
<style>
.el_custom {
  padding: 0px;
}
body {
  padding: 0px;
  margin: 0px;
}
</style>